<template>
  <div id="me_index"
       :style="!$store.state.userInfo.cookie ? { height: '100vh' } : {}">
    <header @click="handleUserClick">
      <van-cell>
        <template #title>
          <van-image width="50"
                     height="50"
                     round
                     style="float: left; margin-left: 20px; border: 2px solid #fff"
                     :src="imgSrc" />
          <span class="custom-title">
            {{ username }}
            <van-icon name="arrow" />
          </span>
        </template>
      </van-cell>
    </header>
    <div class="mylike-content">
      <van-cell title="我喜欢的音乐"
                :label="numFirst + '首'"
                center
                @click="handleOpenLike">
        <template #icon>
          <div class="likeBox"
               v-if="!$store.state.userInfo.cookie">
            <van-icon name="like"
                      class="fontLike" />
          </div>
          <van-image v-else
                     class="imgClass"
                     width="50"
                     height="50"
                     :src="likeMusic.coverImgUrl" />
        </template>
        <template #default>
          <van-button round
                      plain
                      size="small"
                      type="default"
                      @click.stop="handlePalpitation">心动模式</van-button>
        </template>
      </van-cell>
    </div>
    <div class="myPlayMusic"
         v-if="$store.state.userInfo.cookie">
      <van-tabs style="width: 100%"
                v-model="active"
                background="#F6F6F6">
        <van-tab style="width: 100%"
                 title="创建歌单">
          <van-cell-group title="创建的歌单"
                          style="border-radius: 10px">
            <van-cell :style="index == 0 ? { 'border-radius': '10px 10px 0 0' } : ''"
                      v-for="(music, index) in userCreateList"
                      :key="index"
                      :clickable="true"
                      :title="music.name"
                      :label="music.trackCount + '首'"
                      @click="handleOpen(music.id)">
              <template #icon>
                <van-image style="padding-right: 10px"
                           width="48"
                           height="48"
                           :src="music.coverImgUrl" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-tab>
        <van-tab style="width: 100%"
                 title="收藏歌单">
          <van-cell-group title="收藏的歌单"
                          style="border-radius: 10px">
            <van-cell :style="index == 0 ? { 'border-radius': '10px 10px 0 0' } : ''"
                      v-for="(music, index) in userCollectionList"
                      :key="index"
                      :clickable="true"
                      :title="music.name"
                      :label="music.trackCount + '首'"
                      @click="handleOpen(music.id)">
              <template #icon>
                <van-image style="padding-right: 10px"
                           width="48"
                           height="48"
                           :src="music.coverImgUrl" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-tab>
      </van-tabs>
    </div>
    <van-loading :color="globalObj.normColor"
                 v-show="loadingShow"
                 class="loading"
                 size="60"
                 vertical>
      正在开启心动模式...
    </van-loading>
  </div>
</template>

<script>
import { getLikeMusic, getUserPlaylist } from "@/api/userInfo";
import { getSongDetail } from "@/api/songSheet";
import { EventBus } from "../../../currency";
import avatar from "../../assets/avatar.png";
export default {
  name: "me_index",
  data () {
    return {
      imgSrc: avatar,
      username: "立刻登录",
      numFirst: 0,
      active: 0,
      userCreateList: [],
      userCollectionList: [],
      likeMusic: {},
      likeIdsList: [],
      loadingShow: false,
    };
  },
  methods: {
    // 打开喜欢的音乐
    handleOpenLike () {
      if (this.likeMusic == {}) {
        return this.globalObj.$Toast({
          message: "该歌单没有歌曲",
          icon: "close",
        });
      }
      this.$router.push({
        path: `/songSheet`,
        query: {
          id: this.likeMusic.id,
        },
      });
    },
    // 心动模式
    handlePalpitation () {
      if (this.numFirst === 0) {
        return this.globalObj.$Toast({
          message: "该歌单没有歌曲",
          icon: "close",
        });
      }
      this.loadingShow = true;
      let index = 0;
      getSongDetail(this.likeIdsList, this.$store.state.userInfo.cookie).then(
        (res) => {
          index = Math.floor(Math.random() * res.songs.length);
          this.$store.commit("getIndex", index);
          this.$store.commit(
            "getSongList",
            res.songs.sort(() => Math.random() > 0.5)
          );
          EventBus.$emit("playMusic", "心动模式");
          this.loadingShow = false;
        }
      );
    },
    handleOpen (id) {
      this.$router.push({
        path: `/songSheet`,
        query: {
          id: id,
        },
      });
    },
    handleUserClick () {
      if (!this.$store.state.userInfo.cookie) {
        this.$router.push("/login");
      } else {
        this.$router.push({
          path: `/user`,
          query: {
            id: this.$store.state.userInfo.userData.userId,
          },
        });
      }
    },
    initUserData () {
      this.userCreateList = [];
      this.userCollectionList = [];
      let userId = this.$store.state.userInfo.userData.userId;
      let userData = this.$store.state.userInfo.userData;
      this.username = userData.nickname;
      this.imgSrc = userData.avatarUrl;
      let cookie = this.$store.state.userInfo.cookie;
      getLikeMusic(userData.userId, cookie).then((res) => {
        this.likeIdsList = res.ids;
        this.numFirst = res.ids.length;
      });
      getUserPlaylist(userData.userId, cookie).then((res) => {
        res.playlist.forEach((item, index) => {
          if (index === 0) return (this.likeMusic = item);
          if (item.userId == userId) {
            this.userCreateList.push(item);
          } else {
            this.userCollectionList.push(item);
          }
        });
      });
    },
  },
  created () {
    document.title = "我的";
    if (this.$store.state.userInfo.cookie) {
      this.initUserData();
    }
  },
};
</script>

<style scoped>
#me_index {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
#me_index header .van-cell {
  width: 100%;
  background: #f6f6f6;
}
.custom-title {
  font-size: 16px;
  float: left;
  margin-top: 15px;
  margin-left: 10px;
  font-weight: 600;
}
.custom-title > .van-icon {
  float: right;
  padding-top: 4px;
}
.mylike-content {
  display: flex;
  width: 92%;
  margin: 15px auto;
  background: #fff;
  border-radius: 7px;
}
.likeImg {
  width: 50px;
  height: 50px;
  padding: 20px;
}
.likeImg img {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  background: #9c9c9c;
}
.likeBox {
  display: flex;
  width: 48px;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 14px;
  background: #ccc;
}
.fontLike {
  font-size: 25px;
  color: #fff;
}
div /deep/ .myPlayMusic .van-cell__title {
  flex: 5;
}
div /deep/ .myPlayMusic .van-image__img {
  border-radius: 7px;
}
.myPlayMusic {
  width: 90%;
  margin: 10px auto;
}
.mylike-content .van-cell {
  border-radius: 15px;
}

.father {
  display: flex;
}
.son {
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgClass {
  padding-right: 10px;
}
.imgClass /deep/ .van-image__error,
.imgClass /deep/ .van-image__img,
.imgClass /deep/ .van-image__loading {
  border-radius: 10px;
}
.loading {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#me_index /deep/ .van-tabs--line .van-tabs__wrap {
  width: 100%;
}
</style>